<!DOCTYPE html>
<html>
<head><meta name="generator" content="Hexo 3.9.0">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
	<meta name="author" content="Shure">
	<title>html2canvas</title>
	<style type="text/css">
		html, body { margin: 0; padding: 0; background: #333; color: #FFF; font: 12px/1.5 sans-serif; }
		img { display: block; width: 100%; max-width: 100%; margin: 0 auto;}
		input, button { font: 14px/1.5 sans-serif; outline: none;}
		input { box-shadow: none; border: none; }
		button { padding: 5px 10px; border: none; background: #090; color: #FFF; box-shadow: 1px 1px 5px #111; }
		.content { position: relative; }
		.content + div { margin: 20px; text-align: center; }
		.q1, .q2, .q3, .a1, .a2, .a3 { position: absolute; top: 0; max-width: 40%; background: transparent; }
		.q1 { top: 3%; left: 8%; }
		.q2 { top: 36%; left: 8%; }
		.q3 { top: 70%; left: 8%; }
		.a1 { top: 3%; left: 58%; }
		.a2 { top: 36%; left: 58%; }
		.a3 { top: 70%; left: 58%; }
	</style>
</head>
<body>
	<div class="info">
		点击图片上的文字进行编辑，然后点击下方按钮生成图片，长按图片保存，装逼成功！
		<p>温馨提示：请使用手机浏览。</p>
	</div>
	<div id="content" class="content">
		<img src="" alt>
		
		<input type="text" class="q1" value="我们是谁？">
	    <input type="text" class="a1" value="zhiheng博客的忠实粉丝">
	    <input type="text" class="q2" value="能做什么？">
	    <input type="text" class="a2" value="能上天！">
	    <input type="text" class="q3" value="怎么关注？">
	    <input type="text" class="a3" value="扫下方二维码！">
	</div>

	<div>
	    <button>点击生成图片</button>
	</div>

	<div>
	    <img src alt id="result">
	</div>

	<div style="text-align:center;margin:20px auto;width:176px; height: 176px;" markdown="1"><img src="/img/ddAnswer.jpg" alt="ddAnswer" style="margin:0 auto;"></div>
	<p style="text-align: center;margin:20px 0;">更多文章请关注微信公众号： zhiheng博客</p>
	

	<script type="text/javascript" src="/script/html2canvas/html2canvas.min.js"></script>
	<script type="text/javascript">
		document.querySelector('button').addEventListener('click', function (e) {
	        html2canvas(document.getElementById('content'), {
	            onrendered: function(canvas) {
	                var image = canvas.toDataURL('image/png');
	                document.getElementById('result').src = image;
	                var t = setTimeout(function () {
	                    window.scrollTo(0, 5000);
	                }, 100);
	            }
	        });
	    }, false);
	</script>

<script>
	var _hmt = _hmt || [];
	(function() {
		var hm = document.createElement("script");
		hm.src = "https://hm.baidu.com/hm.js?9ef728feeea7cd76996ffedf972c954e";
		var s = document.getElementsByTagName("script")[0]; 
		s.parentNode.insertBefore(hm, s);
	})();
</script>
</body>
</html>